<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
	<style type="text/css">
	*{margin: 0;padding: 0;list-style:none;}
	div{width: 1080px;height: auto;margin: 0 auto;}
	ul{width: 220px;height: 380px;float: left;margin: 10px;padding: 10px;}
	li{width: 200px;height: 300px;border:dashed 1px #369;padding: 10px;
		margin-bottom: 50px;text-align:center;}
	</style>
</head>
<body>
	<div id="all">
			<li id="item" style="display:none">
				<img src="" width="100%">
				<h3>商品标题</h3>
				<p>价格:<span>100</span></p>
			</li>
		<ul>
			
		</ul>
		<ul>
			
		</ul>
		<ul>
			
		</ul>
		<ul>
			
		</ul>
	</div>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	//全局变量 p=1 0,16 p=2 16,16 ....
	var p = 1;//页码
	var isLoading = false;//用来标识当前是否正在发起ajax请求

	requestGoods();
	//封装函数 进行ajax数据请求
	function requestGoods(){
		//临时关闭请求 关门上锁
		isLoading = true;

		//发送ajax
		$.get('2.php',{p:p},function(data){
			// console.log(data);
			//遍历数组 从对象中提取数据放到ul中
			for (var i = 0; i < data.length; i++) {
				//创建元素  克隆li
				var newLi = $('#item').clone();
				//显示
				newLi.show();
				//修改img的src属性
				newLi.find('img').attr('src',data[i].pic);
				//修改标题
				newLi.find('h3').html(data[i]['title']);
				//修改价格
				newLi.find('span').html(data[i]['price']);
				//插入到ul中 0 1 2 3 
				var index = i%4;
				$('ul:eq('+index+')').append(newLi);
			};

			//让页码自增
			p++;

			//开放请求 打开 解锁
			isLoading = false;
		},'json');
	}

	//绑定文档滚动事件
	$(window).scroll(function(){
		//检测当前是否正在发起请求
		if(isLoading){return}
		//获取整个文档的高度
		var sH = $(document).height();
		//获取页码滚动的高度
		var sT = $(window).scrollTop();
		//获取可视区域的高度
		var cH = $(window).height();
		//判断是否需要ajax请求新的数据
		// if(sH == sT + cH){
		if(sH - sT -cH <= 150){//提前加载
			requestGoods();
		
		}
	})
	</script>
</body>
</html>